<template>
	<view><!--header-->
	<view class="tui-header">
		<view class="tui-category" hover-class="opcity" :hover-stay-time="150" @tap="classify">
			<tui-icon name="manage-fill" color="#fff" :size="22"></tui-icon>
			<view class="tui-category-scale">分类</view>
		</view>
		<view class="tui-rolling-search">
			<!-- #ifdef APP-PLUS || MP -->
			<icon type="search" :size='13' color='#999'></icon>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view>
				<tui-icon name="search" :size='16' color='#999'></tui-icon>
			</view>
			<!-- #endif -->
			<swiper vertical autoplay circular interval="8000" class="tui-swiper">
				<swiper-item v-for="(item,index) in hotSearch" :key="index" class="tui-swiper-item" @tap="search">
					<view class="tui-hot-item">{{item}}</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
	<!--header-->
	<view class="tui-header-banner">
		<view class="tui-hot-search">
			<view>热搜</view>
			<view class="tui-hot-tag" @tap="search">自热火锅</view>
			<view class="tui-hot-tag" @tap="search">华为手机</view>
			<view class="tui-hot-tag" @tap="search">有机酸奶</view>
			<view class="tui-hot-tag" @tap="search">苹果手机</view>
		</view>
		<view class="tui-banner-bg">
			<view class="tui-primary-bg tui-route-left"></view>
			<view class="tui-primary-bg tui-route-right"></view>
			<!--banner-->
			<view class="tui-banner-box">
				<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="150" class="tui-banner-swiper"
				 :circular="true" indicator-color="rgba(255, 255, 255, 0.8)" indicator-active-color="#fff">
					<swiper-item v-for="(item,index) in banner" :key="index" @tap.stop="detail">
						<image :src="'/static/images/mall/banner/'+item" class="tui-slide-image" mode="scaleToFill" />
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
	
	<view class="tui-product-category">
		<view class="tui-category-item" v-for="(item,index) in category" :key="index" :data-key="item.name" @tap="more">
			<image :src="'/static/images/mall/category/'+item.img" class="tui-category-img" mode="scaleToFill"></image>
			<view class="tui-category-name">{{item.name}}</view>
		</view>
	</view>
	
	<view class="tui-product-box tui-pb-20 tui-bg-white">
		<view class="tui-group-name" @tap="more">
			<text>新人专享</text>
			<tui-icon name="arrowright" :size="20" color="#555"></tui-icon>
		</view>
		<view class="tui-activity-box" @tap="detail">
			<image src="/static/images/mall/activity/activity_1.jpg" class="tui-activity-img" mode="widthFix"></image>
			<image src="/static/images/mall/activity/activity_2.jpg" class="tui-activity-img" mode="widthFix"></image>
		</view>
	</view>
	
	<view class="tui-product-box tui-pb-20 tui-bg-white">
		<view class="tui-group-name" @tap="more">
			<text>新品推荐</text>
			<tui-icon name="arrowright" :size="20" color="#555"></tui-icon>
		</view>
		<view class="tui-new-box">
			<view class="tui-new-item" :class="[index!=0 && index!=1 ?'tui-new-mtop':'']" v-for="(item,index) in newProduct"
			 :key="index" @tap="detail">
				<image :src="'/static/images/mall/new/'+(item.type==1?'new':'discount')+'.png'" class="tui-new-label" v-if="item.isLabel"></image>
				<view class="tui-title-box">
					<view class="tui-new-title">{{item.name}}</view>
					<view class="tui-new-price">
						<text class="tui-new-present">￥{{item.present}}</text>
						<text class="tui-new-original">￥{{item.original}}</text>
					</view>
				</view>
				<image :src="'/static/images/mall/new/'+item.pic" class="tui-new-img"></image>
			</view>
		</view>
	</view>
	
	<view class="tui-product-box">
		<view class="tui-group-name">
			<text>热门推荐</text>
		</view>
		<view class="tui-product-list">
			<view class="tui-product-container">
				<block v-for="(item,index) in productList" :key="index" v-if="(index+1)%2!=0">
					<!--商品列表-->
					<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="detail">
						<image :src="'/static/images/mall/product/'+item.img+'.jpg'" class="tui-pro-img" mode="widthFix" />
						<view class="tui-pro-content">
							<view class="tui-pro-tit">{{item.name}}</view>
							<view>
								<view class="tui-pro-price">
									<text class="tui-sale-price">￥{{item.sale}}</text>
									<text class="tui-factory-price">￥{{item.factory}}</text>
								</view>
								<view class="tui-pro-pay">{{item.payNum}}人付款</view>
							</view>
						</view>
					</view>
					<!--商品列表-->
					<!-- <template is="productItem" data="{{item,index:index}}" /> -->
				</block>
			</view>
			<view class="tui-product-container">
				<block v-for="(item,index) in productList" :key="index" v-if="(index+1)%2==0">
					<!--商品列表-->
					<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="detail">
						<image :src="'/static/images/mall/product/'+item.img+'.jpg'" class="tui-pro-img" mode="widthFix" />
						<view class="tui-pro-content">
							<view class="tui-pro-tit">{{item.name}}</view>
							<view>
								<view class="tui-pro-price">
									<text class="tui-sale-price">￥{{item.sale}}</text>
									<text class="tui-factory-price">￥{{item.factory}}</text>
								</view>
								<view class="tui-pro-pay">{{item.payNum}}人付款</view>
							</view>
						</view>
					</view>
					<!--商品列表-->
					<!-- <template is="productItem" data="{{item,index:index}}" /> -->
				</block>
			</view>
		</view>
	</view>
	
	<!--加载loadding-->
	<tui-loadmore :visible="loadding" :index="3" type="red"></tui-loadmore>
	<!-- <tui-nomore visible="{{!pullUpOn}}"></tui-nomore> -->
	<!--加载loadding-->
	<view class="tui-safearea-bottom"></view></view>
</template>

<script>
	export default {
		name:"tuiindex",
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
